<script setup lang="ts">
import { convertArrToStr } from '@/utils';
import { searchConfig } from './config/search-config';
import { tableConfig } from './config/table-config';
import { doGetProcedureList } from '@/api/modeling/ProcessManagement/index';
import { generateNameToLevel } from '@/config/constant';
import type {
    WorkingProcedureVO,
    WorkingProcedureAuxiliaryDTO,
    WorkingProcedureEquipmentDTO
} from '@/api/modeling/ProcessManagement/model/type';

const props = defineProps(['visible', 'id', 'processCode']);

const emit = defineEmits(['update:visible', 'ok']);

const dialogVisible = ref(false);
const tableRef = ref<TableRef>();

const { getMaxHeight } = useModal();

watch(
    () => dialogVisible.value,
    val => {
        emit('update:visible', val);
    }
);

watch(
    () => props.visible,
    val => {
        dialogVisible.value = val;
    }
);

watch(
    () => tableRef.value?.tableData,
    tableData => {
        if (!props.id) return;
        if (tableData && Object.keys(tableData).length) {
            // 初始化工序编码列表选择行
            const row = tableData.filter((item: WorkingProcedureVO) => item.id === props.id)[0];
            if (row) tableRef.value?.setCurrentRow(row); // 设置表格选中当前行
        }
    }
);

/**
 * 工序列表单选
 */
const handleOk = () => {
    const selectRow = tableRef.value?.selectTableRowData;

    dialogVisible.value = false;

    emit('ok', selectRow || {});
};

/**
 * 去新增, 切换至工序列表标签
 */
const router = useRouter();
const handleToAdd = () => {
    dialogVisible.value = false;
    router.push('/process/procedureList');
};

/**
 * 处理回显辅助资源字段数据
 * @param {WorkingProcedureEquipmentDTO[]} workingProcedureEquipments 工序设备列表
 */
const handleAuxiliaryText = (workingProcedureEquipments: WorkingProcedureEquipmentDTO[]) => {
    if (workingProcedureEquipments == null) return;
    const AuxiliaryList = workingProcedureEquipments.map(
        (equipments: WorkingProcedureEquipmentDTO) => {
            return equipments.workingProcedureAuxiliary == null
                ? []
                : equipments.workingProcedureAuxiliary.map(
                      (auxiliary: WorkingProcedureAuxiliaryDTO) => auxiliary.auxiliaryResourceName
                  );
        }
    );
    return AuxiliaryList.flat().join(',');
};
</script>

<template>
    <q-modal
        v-model:visible="dialogVisible"
        title="工序编码"
        width="865px"
        ok-text="保存"
        :centered="true"
        @ok="handleOk"
    >
        <base-search
            ref="searchRef"
            :table-ref="tableRef"
            :search-config="searchConfig"
            :close-min-width="true"
        >
            <q-push-button :is-text="false" @click="handleToAdd" />
        </base-search>

        <base-table
            :id="generateNameToLevel('2')"
            ref="tableRef"
            :max-height="getMaxHeight"
            :tableConfig="tableConfig"
            :getDataFn="doGetProcedureList"
            :modal-mode="true"
            :show-setting="false"
            :un-action="true"
        >
            <template #procedureEquipments="{ row }">
                <span
                    v-text="
                        convertArrToStr<WorkingProcedureEquipmentDTO>(
                            row.workingProcedureEquipments,
                            'equipmentNumber'
                        )
                    "
                ></span>
            </template>
            <template #procedureAuxiliary="{ row }">
                <span>{{ handleAuxiliaryText(row.workingProcedureEquipments) }}</span>
            </template>
        </base-table>
    </q-modal>
</template>

<style scoped lang="scss">
@include b(el-col) {
    display: flex;
    align-items: center;
}

@include b(label) {
    width: 75px;
    font-size: 14px;
    text-align: left;
}

@include b(el-row) {
    :deep(.el-range-editor.el-input__wrapper) {
        flex: 1;
    }
}

@include b(el-input) {
    flex: 1;
}

@include b(m-select) {
    @include e(material) {
        @include flex(flex-start);

        margin-bottom: 8px;
        font-size: 14px;
        color: var(--q-text-color-primary);

        label {
            display: block;
        }
    }
}
</style>
./config/table-config
